<template>
  <BackTab>
    <template v-slot:center>新闻信息管理中心___</template>
    <template v-slot:icon
      ><el-icon><UserFilled /></el-icon
    ></template>
    <template v-slot:list>成功案例</template>
  </BackTab>

  <el-card>
    <div class="addnwes">
      <el-button type="primary" @click="addVisible = true">添加案例</el-button>
    </div>
    <el-table :data="newList" style="width: 100%" height="500px">
      <el-table-column label="新闻封面" width="220px">
        <template #default="scope">
          <el-popover placement="right" :width="280" trigger="hover">
            <!-- 渲染的样式 -->
            <img :src="scope.row.img" width="250" height="250" />
            <!-- 鼠标移入时的样式 -->
            <template #reference>
              <img :src="scope.row.img" width="100" height="80" />
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="新闻标题">
        <template #default="scope">
          <a :href="scope.row.link" target="_blank">{{ scope.row.title }}2</a>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200px">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click="deleteById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog v-model="addVisible" title="新增新闻" width="30%" center>
    <el-form
      ref="ruleFormRef"
      :model="addAcNew"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="新闻标题" prop="title">
        <el-input v-model="addAcNew.title" placeholder="标题" />
      </el-form-item>
      <el-form-item label="新闻链接" prop="link">
        <el-input v-model="addAcNew.link" placeholder="链接" />
      </el-form-item>
      <el-form-item label="新闻封面">
        <div class="updateImg">
          <el-upload
            class="avatar-uploader"
            action=""
            :http-request="handleRequest"
            :show-file-list="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="新闻内容" prop="content">
        <el-input
          v-model="addAcNew.content"
          type="textarea"
          placeholder="编辑内容"
          :rows="8"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import BackTab from "@/components/common/tabbar/BackTab.vue";
import { getSuccNew, getDelById } from "@/server/succnew";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { getCurrentInstance, onMounted, reactive, ref } from "vue";

const { proxy }: any = getCurrentInstance();
const newList = ref<any>([]);
const addVisible = ref(false);

onMounted(async () => {
  await getNew();
});

function getNew() {
  getSuccNew().then((res: any) => {
    newList.value = res.list;
  });
}

const deleteById = (id: number) => {
  getDelById(id).then(async () => {
    ElMessage.info("删除成功");
    await getNew();
  });
};

const ruleFormRef = ref<FormInstance>();
const addAcNew = ref<any>({
  title: "",
  content: "",
  link: "",
});
const rules = reactive<FormRules>({
  title: [{ required: true, message: "必填", trigger: "blur" }],
  content: [{ required: true, message: "必填", trigger: "blur" }],
  link: [{ required: true, message: "必填", trigger: "blur" }],
});

const imageUrl = ref("");
//用于存储数据库的url
const saveUrl = ref("");
const handleRequest = (e: any) => {
  const fd = new FileReader();
  fd.readAsDataURL(e.file);
  imageUrl.value = URL.createObjectURL(e.file);
  saveUrl.value = "https://img2.baidu.com/it/" + e.file.name.slice(0, -5);
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (!valid) return;
    if (saveUrl.value == "") return ElMessage.warning("请上传图片封面");
    proxy.$http
      .post("/succnews/add", {
        title: addAcNew.value.title,
        content: addAcNew.value.content,
        link: addAcNew.value.link,
        img: saveUrl.value,
        pubtime: Date(),
      })
      .then(async () => {
        ElMessage.success("提交成功");
        addVisible.value = false;
        await getNew();
      });
  });
};
</script>

<style lang="less" scoped>
.addnwes {
  display: flex;
  justify-content: end;
}
.updateImg {
  // background-color: red;
  padding: 0 10px 0 0;
  display: flex;
  justify-content: center;
  .avatar-uploader {
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dotted gray;
    .avatar {
      width: 100%;
      height: 150px;
    }
  }
}
</style>
